<template>
  <user-address :style="{ height: bodyHeight + 'px' }">
    <div slot="address">
      <van-address-edit
        :show-delete="false"
        center
        :is-saving="saveloading"
        :area-list="areaList"
        :tel-validator="checkPhoneNumber"
        :area-columns-placeholder="[$t('choice'), $t('choice'), $t('choice')]"
        @save="onSave"
      >
      </van-address-edit>
    </div>
  </user-address>
</template>

<script>
import { AddressEdit, Area } from 'vant';
import userAddress from '../components/address.vue';
import citysData from '@/config/data/citys.json';
import 'vant/lib/address-edit/style/less';

export default {
    name: 'add-address',
    components: {
        userAddress,
        [AddressEdit.name]: AddressEdit,
        [Area.name]: [Area]
    },
    data () {
        return {
            bodyHeight: 0,
            areaList: citysData,
            saveloading: false
        };
    },
    methods: {
        onSave (addressdata) {
            this.saveloading = true;
            addressdata.userid = this.$store.state.userInfo._id;
            this.$api.addressApi
                .save(addressdata)
                .then(res => {
                    this.saveloading = false;
                    if (res.code === 2022) {
                        this.$util.successToast(res.message);
                        setTimeout(() => {
                            this.$emit('sendNew', res.data);
                            this.$router.back(-1);
                        }, 1500);
                    } else {
                        this.$util.failToast(res.message);
                    }
                })
                .catch(err => {
                    throw err;
                });
        },
        checkPhoneNumber (value) {
            return this.$util.checkPhoneRight(value);
        }
    },
    created () {
        this.bodyHeight = this.$util.ScreenCanUseHeight();
    }
};
</script>

<style scoped lang="less"></style>
